.bgBox {
    width: 100%;
    margin-bottom: -30px;
    padding-top: 280px;
    background-position: center top;
    .header-title {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .header-left-title {
            width: 46.67%;
            height: 94px;
            line-height: 94px;
            background: url(../imgs/forecom-pink-bg.png) no-repeat center center;
            background-size: cover;
            color: #E25D73;
            letter-spacing: 3px;
            font-weight: bold;
            font-size: 24px;
            // padding-left: 130px;
            padding-left: 90px;
            padding-right: 146px;
            border-top-left-radius: 10px;
            border-top-right-radius: 20px;
        }
        .header-right-title {
            position: relative;
            width: 53.33%;
            height: 94px;
            line-height: 94px; 
            color: #CD7E2D;
            letter-spacing: 3px;
            font-weight: bold;
            font-size: 24px; 
            border-top-left-radius: 20px;
            border-top-right-radius: 10px;
            .right-title-periods {
                position: absolute;
                top: 50%;
                left: 37%;
                transform: translate(-50%, -50%);
            }
            .right-percent-text{
                position: absolute;
                top:2px;
                right:-8px;
                transform:rotate(45deg);
                font-size:12px;
                color:#fff;
                span{
                    font-size:18px;
                }
            }
        }
    }
    .header-content {
        background: #F8F0C9;
        padding-bottom: 8px;
        .header-content-innerBox {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            background: #FFFCED;
        }
        .header-left-content {
            width: 46.67%;
            padding: 37px 95px 37px 91px;
            .left-content-text {
                font-size: 18px;
                color: #4C4C4C;
                letter-spacing: 3px;
                font-weight: bold;
                margin-bottom: 32px;
                span {
                    color: #E52A20;
                }
            }
            span.countdown-num {
                width: 74px;
                height: 78px;
                font-size: 41px;
                line-height: 78px;
                background-image: url(../imgs/countdown-big-bg.png);
                color: #fff;
            }
            span.countdown-text {
                font-size: 32px;
                color: #363636;
            }
        }
        .header-right-content {
            width: 53.33%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 43px 0px 43px 0;
            .right-content-line {
                width: 2px;
                height: 125px;
                background: #EAE5CE;
                // margin-right: 66px;
            }
            .content-winnum-ul {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .content-winnum-li {
                    width: 66px;
                    height: 66px;
                    line-height: 66px;
                    background: #E52A20;
                    border-radius: 50%;
                    color: #fff;
                    font-size: 36px;
                    margin-right: 39px;
                    &:last-child {
                        margin-right: 0;
                    }
                }
            }
        }
    }
    .forecom-bottom-details {
        margin-top: 8px;
        background: #fff;
        .bottom-query-area {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            background: #bc9dc8;
            border-top: 3px solid #9168a2;
            padding: 14px 0 12px 43px;
            .query-area-line {
                width: 3px;
                height: 14px;
                background: #643775;
                margin-right: 50px;
            }
            .query-area-input-outbox {
                color: #643775;
                font-size: 16px;
                margin-right: 36px;
            }
            .query-area-input {
                width: 72px;
                height: 35px;
                line-height: 35px;
                border-radius: 17px;
                border: 1px solid #885b99;
                color: #643775;
                background: #bc9dc8;
                &::-webkit-input-placeholder {
                    color: #643775;
                }
            }
            .query-area-btn {
                display: inline-block;
                width: 69px;
                height: 35px;
                border-radius: 17px;
                background: #643775;
                color: #FEFEFE;
                font-size: 16px;
                cursor: pointer;
            }
        }
        .forecast-plan-title {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding-left: 36px;
            padding-top: 26px;
            .forep-title-icon {
                width: 16px;
                height: 16px;
                position: relative;
                top: 2px;
                margin-right: 6px;
            }
            .forep-title-title {
                color: #000;
                font-size: 16px;
                margin-right: 18px;
            }
            .forep-title-ul {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .forep-title-li {
                    height: 35px;
                    line-height: 35px;
                    padding: 0 20px;
                    border: 1px solid #6c6c6c;
                    border-radius: 17px;
                    margin-right: 20px;
                    color: #6c6c6c;
                    cursor: pointer;
                    &:last-child {
                        margin-right: 0;
                    }
                }
                .active {
                    border-color: #e52a20;
                    color: #e52a20;
                }
            }
        }
        .forecast-plan-line {
            padding: 27px 34px 18px 24px;
            .line-innerBox {
                width: 100%;
                height: 3px;
                background: #E8E8E8;
            }
        }
        .plan-details-table {
            padding: 0 58px 20px 37px;
            .plan-details-intro {
                height: 46px;
                line-height: 46px;
                padding-left: 27px;
                background: #FFFDE6;
                border: 1px solid #FEE9CA;
                color: #404040;
                font-size: 16px;
                margin-bottom: 19px;
                span {
                    color: #E52A20;
                }
            }
        }
    }
}
.bgBox .header-content .header-right-content .content-winnum-ulpc{
    position: relative;
  }
  .right-content-winnum{
    margin: 0 auto;
  }
  .bgBox .header-content .header-right-content .content-winnum-ulpc .content-winnum-li:nth-child(2)::before{
      content: "+";
      color:#3b3b3b;
      position: absolute;
      left: 73px;
  }
  .bgBox .header-content .header-right-content .content-winnum-ulpc .content-winnum-li:nth-child(2)::after{
      content: "+";
      color:#3b3b3b;
      position: absolute;
      left: 176px;
  }
  // .bgBox .header-content .header-right-content .content-winnum-ulpc .content-winnum-lipc:nth-child(4){
  //     background: #E52A20;
  // }
  .bgBox .header-content .header-right-content .content-winnum-ulpc .content-winnum-li:nth-child(4)::before{
      content: "=";
      color:#3b3b3b;
      position: absolute;
      left: 283px;
  }
  .bgBox .header-content .header-right-content .content-winnum-ul .content-winnum-libj{
    width: 52px;
    height: 52px;
    border:3px solid #FFDBDA;
    line-height: 52px;
    margin-right: 4px;
    font-size: 22px;
  }